<template>
  <div>
    <ul>
      <li v-for="m of messageList" :key="m.id">
        <!-- 路由跳转并携带参数 ---------------------- to的字符串写法(只能携带较少参数-不推荐)
             这里需要用到字符串里混着js表达式:
             :表示后面都是js表达式----允许有js表达式
             而``里面一个整体代表一个js表达式，并且
             里面还可以有字符串和js表达式，只不过这个js表达式是需要用${}来实现
             本质上就是 借用的``可以混着写的特点，又因为``是js表达式，所以to要加:
        -->
        <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{
          m.title
        }}</router-link> -->

        <!-- 路由跳转并携带参数 ---------------------- to的对象写法(更加清晰-推荐) -->
        <router-link
          :to="{
            path: '/home/message/detail',
            query: { 
              id: m.id, 
              title: m.title 
            },
          }"
          >{{ m.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "myMessage",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

<style></style>
